<template>
  <view>
    <view v-if="showDel && data.ioType==1" class="margin-bottom-10 flex-row flex-center align-center justify-between margin-top-40">
      <text v-if="form.vehicleType == 1" class="text-34 color-t1">车辆{{ inx+1 }}（外调车辆）</text>
      <text v-else class="text-34 color-t1">车辆{{ inx+1 }}</text>
      <text class="tbb-shanchu text-34 color-t1" @click="delVehicle" />
    </view>

    <add-order-cell label="车辆类型" has-slot border-radius="14rpx 14rpx 0 0" un-hover>
      <l-radio-group :checked="form.vehicleType" :radios="vehicleType" @change="vehicleTypeChange" />
    </add-order-cell>
    <template v-if="data.ioType==0">
      <add-order-cell label="车辆" must has-slot :arrow="!vehicleAdd" @click="choose('vehicle')">
        <text class="text-30" :class="['color-t' + (form.vehicleName ? 1 : 3)]">{{ form.vehicleName || '请选择车辆' }}</text>
      </add-order-cell>
      <add-order-cell label="选择司机" must has-slot arrow @click="choose('driver')">
        <text class="text-30" :class="['color-t' + (form.driverName ? 1 : 3)]">{{ form.driverName || '请选择司机' }}</text>
      </add-order-cell>
    </template>
    <template v-else>
      <template v-if="form.vehicleType==0">
        <add-order-cell label="车辆" must has-slot :arrow="!vehicleAdd" @click="choose('vehicle')">
          <text class="text-30" :class="['color-t' + (form.vehicleName ? 1 : 3)]">{{ form.vehicleName || '请选择车辆' }}</text>
        </add-order-cell>

        <add-order-cell v-model="form.realPrice" label="车费" must type="digit" :maxlength="5" placeholder="请输入车费" suffix="元" />
        <add-order-cell v-model="form.passengers" label="乘车人数" type="number" :maxlength="3" placeholder="请输入乘车人数" suffix="人" />

        <add-order-cell label="司机类型" has-slot un-hover>
          <l-radio-group :checked="form.driverType" :row="3" :radios="driverType" @change="driverTypeChange" />
        </add-order-cell>

        <add-order-cell v-if="form.driverType==0" label="选择司机" must has-slot arrow @click="choose('driver')">
          <text class="text-30" :class="['color-t' + (form.driverName ? 1 : 3)]">{{ form.driverName || '请选择司机' }}</text>
        </add-order-cell>

        <add-order-cell v-if="form.driverType==1" label="选择司机" must has-slot arrow @click="choose('driver')">
          <text class="text-30" :class="['color-t' + (driver ? 1 : 3)]">{{ driver || '请选择司机' }}</text>
        </add-order-cell>

        <template v-if="form.driverType==2">
          <add-order-cell v-model="form.driverName" label="司机姓名" must placeholder="请输入司机姓名" />
          <add-order-cell v-model="form.driverPhone" label="司机电话" type="number" :maxlength="11" placeholder="请输入司机电话" />
        </template>

        <template v-if="form.driverType != 2">
          <add-order-cell v-if="form.driverType!=1" v-model="form.driverSubsidyAmount" label="司机补助" type="digit" placeholder="请输入司机补助" suffix="元" />
          <add-order-cell v-model="form.driverRemark" label="司机备注" unlined placeholder="给司机留言(司机端可查看)" border-radius="0 0 14rpx 14rpx" />
        </template>

        <add-order-cell v-else v-model="form.platformDriverFee" label="外调费用" maxlength="5" unlined border-radius="0 0 14rpx 14rpx" type="digit" placeholder="请输入外调司机费用" suffix="元" />
      </template>

      <template v-else>
        <add-order-cell label="车队名称" has-slot must>
          <tui-dropdown-list
            shadow
            :transition="false"
            :height="530"
            :top="-position"
            :show="!!(showAutoCompanyName&&list.length)"
            background-color="#fff"
            class="flex-item"
          >
            <input
              slot="selectionbox"
              v-model="form.autoCompanyName"
              style="height:66rpx;"
              type="text"
              class="text-30 color-t1"
              placeholder="请输入车队名称"
              placeholder-class="color-t3"
              @click.stop="listHistoryOutwardAutoCompany"
              @focus="showAutoCompanyName=true"
            >
            <template slot="dropdownbox">
              <scroll-view style="max-height: 530rpx;" scroll-y @scrolltolower="nextPage">
                <view
                  v-for="(val,key) in list"
                  :key="key"
                  class="padding-lr-20 item"
                  hover-class="hover"
                  :hover-stay-time="70"
                  @click="form.autoCompanyName = val.autoCompanyName;showAutoCompanyName=false;"
                >
                  <view class="list-item flex-row align-center">
                    <text class="text-30 color-t1">{{ val.autoCompanyName }}</text>
                  </view>
                </view>
              </scroll-view>
            </template>
          </tui-dropdown-list>
        </add-order-cell>

        <add-order-cell v-model="form.realPrice" label="车费" must type="digit" placeholder="请输入车费" :maxlength="5" suffix="元" />
        <add-order-cell v-model="form.seatNum" label="座位数" type="number" placeholder="请输入座位数" />
        <add-order-cell v-model="form.passengers" label="乘车人数" type="number" placeholder="请输入乘车人数" :maxlength="3" suffix="人" />

        <add-order-cell label="外调车辆支付方式" label-padding="0 44rpx 0 0" has-slot un-hover>
          <l-radio-group :checked="form.payWay" :radios="payWay" @change="form.payWay = $event.value" />
        </add-order-cell>

        <add-order-cell v-model="form.outwardRealPrice" label="外调费用" :must="form.payWay == 3" type="digit" maxlength="5" placeholder="请输入外调车辆费用" suffix="元" />
        <add-order-cell v-model="form.driverName" label="司机姓名" placeholder="请输入司机姓名" />
        <add-order-cell v-model="form.driverPhone" label="司机电话" type="digit" unlined placeholder="请输入司机电话" border-radius="0 0 14rpx 14rpx" :maxlength="11" />
      </template>
    </template>
  </view>
</template>

<script>
import AddOrderCell from '../add-order-cell/add-order-cell'
import { mapGetters } from 'vuex'
import { pageHistoryOutwardAutoCompany } from '../../api'
import { vehicleType, driverType, payWay } from '../../index'
export default {
  name: 'OrderVehicleModule',
  components: {
    AddOrderCell
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
	formInfo: {
	  type: Object,
	  default: () => {}
	},
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    },
    showDel: {
      type: Boolean,
      default: false
    },
    inx: {
      type: Number,
      default: 0
    },
    showPlatformDriver: {
      type: Boolean,
      default: true
    },
    vehicleAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      vehicleType,
      driverType,
      payWay,
      form: {
        vehicleName: '', // 车辆名称
        driverName: '', // 司机名称
        realPrice: '', // 车费
        passengers: '', // 乘车人数
        driverSubsidyAmount: '', // 司机补助
        driverRemark: '', // 司机备注
        vehicleType: 0, // 车辆类型 0-自有车辆 1-外调车辆
        driverType: 0, // 司机类型 0-自有司机 1-平台司机 2-外调司机
        driverId: '', // 司机id
        vehicleId: '', // 车辆id
        platformDriverFee: '', // 司机费用
        // 外调表单
        autoCompanyName: '',
        seatNum: '',
        driverPhone: '',
        payWay: 3,
        outwardRealPrice: ''
      },
      setVehicleAttrs: [
        'driverName',
        'platformDriverFee',
        'driverId',
        'vehicleName',
        'autoCompanyName',
        'driverPhone',
        'vehicleId'
      ],
      setDriverAttrs: [
        'driverName',
        'driverPhone',
        'platformDriverFee',
        'driverId'
      ],
      showAutoCompanyName: false, // 展示外调车辆车企列表
      position: 0, // 车企名称列表定位值
      list: [], // 车企名称列表
      current: 1, // 页码
      limit: 10, // 每页多少个
      hasMore: true // 是否有下一页
    }
  },
  computed: {
    driver() {
      if (this.form.platformDriverFee) {
        return this.form.driverName + ' ' + this.form.platformDriverFee + '元'
      } else {
        return this.form.driverName
      }
    },
    ...mapGetters({
      editOrderSave: 'editOrderSave'
    })
  },
  watch: {
    form: {
      handler(e) {
        this.$emit('update', e)
      },
      deep: true
    },
    data: {
      handler(e) {
        this.initData(e)
      },
      deep: true
    },
    showPlatformDriver(e) {
      if (!e) {
        this.driverType.pop()
        if (this.form.driverType === 2) this.driverTypeChange({ value: 0 })
      } else if (this.driverType.length < 3) {
        this.driverType.push({ label: '平台', value: 1 })
      }
    }
  },
  created() {
    this.initData(this.data)
  },
  methods: {
    initData(e) {
      Object.keys(this.form).forEach(item => {
        this.form[item] = e[item]
      })
    },
    // 修改车辆类型nextPage
    vehicleTypeChange(e) {
      this.form.vehicleType = e.index
      this.setVehicleAttrs.forEach(attr => {
        if (this.editOrderSave && e.index === this.editOrderSave.vehicleType) this.form[attr] = this.editOrderSave[attr]
        else this.form[attr] = ''
        if (this.editOrderSave && this.editOrderSave === 1) this.form.platformDriverFee = this.editOrderSave.platformDriverFee
      })
      if (this.form.driverType) {
        this.setDriverAttrs.forEach(attr => {
          this.form[attr] = ''
        })
      }
      if (e.vehicleType == 1) {
        this.current = 1
        this.listHistoryOutwardAutoCompany()
      }
    },
    // 修改司机类型
    driverTypeChange(e) {
      this.form.driverType = e.value
      this.setDriverAttrs.forEach(attr => {
        if (this.editOrderSave && e.value === this.editOrderSave.driverType) this.form[attr] = this.editOrderSave[attr]
        else this.form[attr] = ''
      })
    },
    // 选择车辆/司机
    choose(type) {
      // driver  vehicle
      if (this.vehicleAdd && type === 'vehicle') return
      if (!this.startDate) {
        this.toast('请选择出发时间')
        return
      }
      if (!this.endDate) {
        this.toast('请选择结束时间')
        return
      }
      if (type === 'driver' && !this.form.vehicleId) {
        this.toast('请选择车辆')
        return
      }

      let url
      const urlQuery = '&seatAmount=bt' + this.form.passengers
      console.log(this.data, this.form, "---------", this.formInfo)
      if (type === 'vehicle') {
        // 车辆
        url = '/vehicle/list/index?order=auto&driverType=' + 
		this.form.driverType + urlQuery + 
		(this.data.ioType ? '&ioType=' + this.data.ioType : '') + 
		(this.data.autoBrand ? '&brand=' + this.data.autoBrand : '') + 
		'&passengers=' + this.data.passengers + '&vehicleId=' + this.data.vehicleId + 
		'&isTaoTuan=' + (this.formInfo.isTaoTuan ? 1 : 0)
      } else {
        const query = 'vehicleId=' + this.form.vehicleId + urlQuery
        if (this.form.driverType == 0) {
          // 自有司机
          url = '/driver/list/index?' + query + (this.data.ioType ? '&ioType=' + this.data.ioType : '') + (this.data.driverId ? '&driverId=' + this.data.driverId : '')
        } else {
          // 平台外调司机
          url = '/driver/platform-driver/platform-driver?' + query
        }
      }
      this.$emit('choose', {
        type,
        url
      })
    },
    nextPage() {
      if (this.hasMore) {
        this.current++
        this.listHistoryOutwardAutoCompany()
      }
    },
    // 获取外调车辆车企名称列表
    async listHistoryOutwardAutoCompany() {
      const [err, res] = await pageHistoryOutwardAutoCompany({
        current: this.current,
        limit: this.limit,
        autoCompanyName: this.form.autoCompanyName
      })
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []
      if (list.length < this.limit) this.hasMore = false
      if (this.current === 1) this.list = list
      else this.list.push(...list)
      this.position = (this.list.length < 5 ? this.list.length : 5) * 106
    },
    delVehicle() {
      this.$emit('delVehicle')
    }
  }
}
</script>

<style scoped lang="scss">
.list-item{
  border-bottom:2rpx solid $color-border;
  height:106rpx;
}
.item:last-child .list-item{
  border:none;
}
</style>
